<template>
	<view>
		<view class="u-padding-20">
			<u-search v-model="keyword" placeholder="请输入收货人或联系方式" :show-action="true" action-text="搜索" :animation="true" @search="search" @custom="search"></u-search>
		</view>
		
		<view style="background-color: #FFFFFF;margin-top: 1px;" class="u-border-bottom">
			<u-tabs :list="tabs" bold='true' activeColor="#0B868E" :current="current" @change="changeTabs">
			</u-tabs>
		</view>
		<view>
			<u-empty :show="showEmpty" iconSize="300" marginTop="30" src="https://resourse.cnlhjt.com/upload/20220824/d435ba6ccf8ec8547f6c10b4dbfa1b2d.png">
			</u-empty>
			<view class="con_list u-border-bottom u-rela" v-for="(item,index) in list" :key="index" @click="toorderDetail(item.id)">
				<view v-if="item.order_status==3 || item.order_status==2" style="color:#ff0000;font-size: 26rpx;" class="u-abso pos_right">待支付</view>
				<view v-if="item.order_status==4" style="color:#ffaa00;font-size: 26rpx;" class="u-abso pos_right">待发货</view>
				<view v-if="item.order_status==5" style="color:#ff5500;font-size: 26rpx;" class="u-abso pos_right">待收货</view>
				<view v-if="item.order_status==6" style="color:#00aa00;font-size: 26rpx;" class="u-abso pos_right">已完成</view>
				<image :src="item.images[0]" mode="aspectFill"></image>
				<view class="dis_inl_blo con_intro">
					<view class="title_name">{{item.content}}</view>
					<view class="person_con">
						<text>{{item.tel}}</text>
						<text class="u-margin-left-20">{{item.name}}</text>
					</view>
					<view class="price u-abso">
						<text>报价：<text style="color:red;font-size:32rpx;">￥{{item.price}}</text></text>
						<text class="time u-abso pos_right">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getLatticeOrder,
		searchLatticeOrder
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				keyword:'',
				page:2,
				limit:10,
				current: 0,
				status:99,
				showEmpty:false,
				tabs: [
					{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '已完成'
					}
				],
				
				list: []
			}
		},
		onShow() {
			getLatticeOrder().then(this.getLatticeOrder);
		},
		onReachBottom() {
			getLatticeOrder({
				status:this.status,
				page: this.page,
				limit: this.limit
			}).then(res=>{
				// console.log(res);
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						this.list = e.result;
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		methods:{
			getLatticeOrder(e){
				if (e.code == 200) {
					this.showEmpty = false;
					this.list = e.result;
				} else{
					this.showEmpty = true;
					this.list=[]
				}
			},
			changeTabs(e) {
				// console.log(e);
				let par;
				this.current = e;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						this.status=0
						break;
					case 2:
						par = {
							status: 3
						};
						this.status=3
						break;
					case 3:
						par = {
							status: 4
						};
						this.status=4
						break;
					case 4:
						par = {
							status: 1
						};
						this.status=1
						break;
					default:
						par = {
							status: 99
						};
						this.status=99
				}
				getLatticeOrder(par).then(this.getLatticeOrder);
			},
			search:function(){
				searchLatticeOrder({
					keyword:this.keyword
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.list=res.result
					}else{
						this.showEmpty = true;
						this.list=[]
					}
				})
			},
			toorderDetail:function(id){
				uni.navigateTo({
					url:'./trellisOrderDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.top_titlelist{
		width:95%;
		margin:0 auto;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15); 
		border-radius: 10rpx;padding-top: 20rpx;
	}
	.scroll-list {
		margin-left: 20rpx;
		display: flex;
		padding:15rpx 0;
		&__goods-item {
			margin-right: 20rpx;
			text-align: center;
			&__image {
				height: 95rpx;
				border-radius: 4px;
			}
	
			&__text {
				color: #333;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	}
	.con_list{
		padding:20rpx;
	}
	.con_list image{
		width:25%;
		height:180rpx;
		border-radius: 10rpx;
		vertical-align: top;
	}
	.con_intro{
		width:70%;
		margin-left:15rpx;
		vertical-align: top;
	}
	.person_con{
		margin-top:10rpx;
		font-size: 26rpx;
		color:#666;
	}
	.title_name{
		width:80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price{
		width:70%;
		bottom:20rpx;
		font-size: 28rpx;
	}
	.time{
		font-size: 24rpx;
		color:#666;
	}
</style>
